<template>
    <a-card size="small">
        <h3 slot="title" class="title">
            <a-icon type="wallet" /> 审批记录
        </h3>
        <div class="flex">
            <a-timeline style="width:850px;">
                <a-timeline-item v-for="(item, index ) in flowRecordList" :key="index">
                    <a-icon slot="dot" :type="setIcon(item.finishTime)"
                        :style="{ color: setColor(item.finishTime), fontSize: '16px' }" />
                    <p style="font-weight: 700;text-align: left;">{{ item.taskName }}</p>
                    <a-card size="small">
                        <a-descriptions size="small" bordered :column="1">
                            <a-descriptions-item v-if="item.assigneeName">
                                <template slot="label">
                                    <a-icon type="user" />实际办理
                                </template>
                                {{ item.assigneeName }}
                                <a-tag>{{ item.deptName }}</a-tag>
                            </a-descriptions-item>
                            <a-descriptions-item v-if="item.candidate">
                                <template slot="label">
                                    <a-icon type="user" />候选办理
                                </template>
                                {{ item.candidate }}
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <template slot="label">
                                    <a-icon type="calendar" />接收时间
                                </template>
                                {{ item.createTime }}
                            </a-descriptions-item>
                            <a-descriptions-item v-if="item.finishTime">
                                <template slot="label">
                                    <a-icon type="calendar" />处理时间
                                </template>
                                {{ item.finishTime }}
                            </a-descriptions-item>
                            <a-descriptions-item v-if="item.duration">
                                <template slot="label">
                                    <a-icon type="history" />耗时
                                </template>
                                {{ item.duration }}
                            </a-descriptions-item>
                            <a-descriptions-item v-if="item.comment">
                                <template slot="label">
                                    <a-icon type="file-text" />处理意见
                                </template>
                                {{ item.comment.comment }}
                            </a-descriptions-item>
                        </a-descriptions>
                    </a-card>
                </a-timeline-item>
            </a-timeline>
        </div>
    </a-card>
</template>

<script>
export default {
    props: {
        flowRecordList: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        setIcon(val) {
            if (val) {
                return "check-circle";
            } else {
                return "clock-circle";
            }
        },
        setColor(val) {
            if (val) {
                return "#2bc418";
            } else {
                return "#b3bdbb";
            }
        },
    }
}
</script>

<style lang="less" scoped>
.ant-card-bordered {
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 #00000025;

}
</style>